<template>
  <div class="content-mode clearfix">
    <div class="mode-box" @click="selectMode('temp')">
      <h4>使用已保存的画像模板快速创建</h4>
      <div class="mode-img img-type-1"></div>
      <p><i class="el-icon-plus"></i>创建单用户画像</p>
    </div>
    <div class="mode-box" @click="selectMode('tag')">
      <h4>拖入自定义标签创建</h4>
      <div class="mode-img img-type-2"></div>
      <p><i class="el-icon-plus"></i>创建单用户画像</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {}
  },
  methods: {
    selectMode(mode) {
      this.$emit('mode', mode)
    }
  }
}
</script>

<style lang="scss">
.tag-portrait {
  .content-mode {
    width: 700px;
    margin: 150px auto 50px auto;
    .mode-box {
      float: left;
      width: 320px;
      padding: 30px;
      color: #666;
      background: #fff;
      text-align: center;
      border-radius: 4px;
      box-shadow: 2px 2px 7px #999;
      transition: all 0.2s linear;
      cursor: pointer;
      h4 {
        font-size: 17px;
      }
      .mode-img {
        width: 250px;
        height: 151px;
        margin: 50px 5px;
        transition: all 0.2s linear;
        background-repeat: no-repeat;
        &.img-type-1 {
          background-image: url(~@/assets/img/factory_cust1.png);
        }
        &.img-type-2 {
          background-image: url(~@/assets/img/factory_cust2.png);
        }
      }
      i {
        font-weight: bold;
        margin-right: 5px;
      }
      & + .mode-box {
        margin-left: 50px;
      }
      &:hover {
        color: #455fbc;
        box-shadow: 2px 2px 15px #999;
        .mode-img {
          transform: scale(1.1);
          &.img-type-1 {
            background-image: url(~@/assets/img/factory_cust1_hover.png);
          }
          &.img-type-2 {
            background-image: url(~@/assets/img/factory_cust2_hover.png);
          }
        }
      }
    }
  }
}
</style>
